<h2>Contact of {{userName}}</h2>
<div *ngIf="msg" class="msg">{{msg}}</div>

<form *ngIf="contacts" (ngSubmit)="onSubmit()" #contactForm="ngForm">
  <h3 highlight>{{contact.name | awesome}}</h3>

  <div class="form-group">
    <label for="name">Name</label>
    <input id="name" name="name" type="text" class="form-control" required
           [(ngModel)]="contact.name" #name="ngModel">
    <div [hidden]="name.valid" class="alert alert-danger">
      Name is required
    </div>
  </div>
  <br>
  <button type="submit" class="btn btn-default" [disabled]="!contactForm.form.valid">
    Save
  </button>
  <button type="button" class="btn" (click)="next()" [disabled]="!contactForm.form.valid">
    Next Contact
  </button>
  <button type="button" class="btn" (click)="newContact()">
    New Contact
  </button>
</form>
